<template>
  <div class="app-container">
    <el-form label-width="100px" class="form-table">
      <el-row>
        <el-col :span="6">
          <el-form-item label="状态">
            {{ borrower.params.status }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建时间">
            {{ borrower.createTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="月收入">
            {{ borrower.params.income }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="姓名">
            {{ borrower.name }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            {{ borrower.params.sex }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年龄">
            {{ borrower.age }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="手机">
            {{ borrower.mobile }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="学历">
            {{ borrower.params.education }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否结婚">
            {{ borrower.params.marry }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="行业">
            {{ borrower.params.industry }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="还款来源">
            {{ borrower.params.returnSource }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="身份证号">
            {{ borrower.idCard }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人名称">
            {{ borrower.contactsName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人手机">
            {{ borrower.contactsMobile }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人关系">
            {{ borrower.params.relation }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="24"
          :key="attach.id"
          v-for="attach in borrower.borrowerAttaches"
        >
          <el-form-item :label="attach.imageName">
            <span>
              <el-image
                style="width: 150px"
                :src="attach.imageUrl"
                :preview-src-list="[attach.imageUrl]"
              />
            </span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button @click="back"> 返回 </el-button>
      </el-row>
      <el-form label-width="170px" v-if="borrower.status === 1">
        <el-form-item label="是否通过">
          <el-radio-group v-model="approvalForm.status">
            <el-radio :label="2"> 通过 </el-radio>
            <el-radio :label="-1"> 不通过 </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="approvalForm.status == 2" label="基本信息积分">
          <el-input v-model="approvalForm.infoIntegral" style="width: 140px" />
          <span style="color: indianred">（可获取30至100积分）</span>
        </el-form-item>
        <el-form-item
          v-if="approvalForm.status == 2"
          label="身份证信息是否正确"
        >
          <el-radio-group v-model="approvalForm.isIdCardOk">
            <el-radio :label="true"> 是 </el-radio>
            <el-radio :label="false"> 否 </el-radio>
          </el-radio-group>
          <span style="color: indianred">（可获得积分30积分）</span>
        </el-form-item>
        <el-form-item v-if="approvalForm.status == 2" label="车辆信息是否正确">
          <el-radio-group v-model="approvalForm.isCarOk">
            <el-radio :label="true"> 是 </el-radio>
            <el-radio :label="false"> 否 </el-radio>
          </el-radio-group>
          <span style="color: indianred">（可获得积分60积分）</span>
        </el-form-item>
        <el-form-item v-if="approvalForm.status == 2" label="房产信息是否正确">
          <el-radio-group v-model="approvalForm.isHouseOk">
            <el-radio :label="true"> 是 </el-radio>
            <el-radio :label="false"> 否 </el-radio>
          </el-radio-group>
          <span style="color: indianred">（可获得积分100积分）</span>
        </el-form-item>
        <el-row style="text-align: center">
          <el-button type="primary" @click="approvalSubmit()"> 确定 </el-button>
        </el-row>
      </el-form>
    </el-form>
  </div>
</template>
<script>
import borrowerApi from "@/api/borrower";
export default {
  data() {
    return {
      approvalForm: {
        status: 2,
      }, //审批结果
      borrower: {}, //借款人详情
    };
  },
  created() {
    // console.log(this.$route.params.id);
    this.fetchData();
  },
  methods: {
    //提交审批结果
    approvalSubmit() {
      //需要将借款人id携带提交到后端
      this.approvalForm.borrowerId = this.$route.params.id;
      borrowerApi.approval(this.approvalForm).then((r) => {
        this.$message.success("审批成功");
        this.$router.push("/borrower/list");
      });
    },
    back() {
      //返回借款人列表页
      this.$router.push("/borrower/list");
    },
    fetchData() {
      borrowerApi.getBorrowerDetail(this.$route.params.id).then((r) => {
        console.log(r.data.item);
        this.borrower = r.data.item;
      });
    },
  },
};
</script>
